<template>
  <div >
    <!--:rules="rules"-->
    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="店主名称" prop="shopkeeperName">
        <el-input v-model="ruleForm.shopkeeperName"></el-input>
      </el-form-item>
      <el-form-item label="店主手机号" prop="shopkeeperPhoneNumber">
        <el-input v-model="ruleForm.shopkeeperPhoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="店主身份证号" prop="shopkeeperCardId">
        <el-input v-model="ruleForm.shopkeeperCardId"></el-input>
      </el-form-item>
      <el-form-item label="钱包余额" prop="burseBalance">
        <el-input v-model="ruleForm.burseBalance"></el-input>
      </el-form-item>
      <p >

        <el-form-item label="身份证期效" prop="cardCertificate" style="width: 40% ;float:left;margin-right: 3%" >
          <el-input v-model="ruleForm.cardCertificate"></el-input>
        </el-form-item>

        <el-form-item label="结束时间" prop="cardEndTime"  style="width: 40%;float:left ">
          <el-input v-model="ruleForm.cardEndTime"></el-input>
        </el-form-item>

      </p>
      <p >

        <el-form-item label="营业执照期效" prop="licenseCertifIcate" style="width: 40% ;float:left;margin-right: 3%">
          <el-input v-model="ruleForm.licenseCertifIcate"></el-input>
        </el-form-item>

        <el-form-item label="结束时间" prop="licenseEndTime"  style="width: 40%;float:left ">
          <el-input v-model="ruleForm.licenseEndTime"></el-input>
        </el-form-item>

      </p>

      <el-form-item label="店铺头像" style="clear: both" prop="merchantLogoImg">
        <p class="demo-image__preview" v-show="!compile">
          <el-image
            style="width: 200px; height: 150px"
            :src="ruleForm.merchantLogoImg" >
          </el-image>
          <!-- :preview-src-list="srcList">-->
        </p>
        <el-upload
          class="imgss"
          action="http://localhost:8301/merchantPhoto/upload"
          :show-file-list="false"
          :auto-upload=true
          :on-success="onSuccess1"
          name="file"
          :limit="1" v-show="compile">
          <img v-if="ruleForm.merchantLogoImg !=null" :src="ruleForm.merchantLogoImg" style="width: 80px;heigh:80px;vertical-align: middle;">
          <i class="el-icon-plus"></i>
        </el-upload>

      </el-form-item>
      <el-form-item label="店铺名称" prop="merchantName">
        <el-input v-model="ruleForm.merchantName"></el-input>
      </el-form-item>
      <el-form-item label="店铺账号" prop="merchantAccount">
        <el-input v-model="ruleForm.merchantAccount"></el-input>
      </el-form-item>

      <el-form-item label="店铺公告" prop="merchantNotice">
        <el-input v-model="ruleForm.merchantNotice"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址" prop="merchantAddress">
        <el-input v-model="ruleForm.merchantAddress"></el-input>
      </el-form-item>
      <el-form-item label="店铺描述" prop="merchantDesc">
        <el-input v-model="ruleForm.merchantDesc"></el-input>
      </el-form-item>
      <p :inlist="true">
        <el-form-item label="店铺评分" prop="merchantScore" style="width: 40% ;float:left;margin-right: 3%" >
          <el-input v-model="ruleForm.merchantScore"></el-input>
        </el-form-item>

        <el-form-item label="店铺关注数量" prop="merchantAttention" style="width: 40%;float:left ">
          <el-input v-model="ruleForm.merchantAttention"></el-input>
        </el-form-item>
      </p>
      <p :inlist="true">

        <el-form-item label="店铺类型" prop="merchantTypeId" style="width: 40% ;float:left;margin-right: 3%">
          <el-input v-model="ruleForm.merchantTypeId"></el-input>
        </el-form-item>

        <el-form-item label="店铺主营类目" prop="merchantKindsId"  style="width: 40%;float:left ">
          <el-input v-model="ruleForm.merchantKindsId"></el-input>
        </el-form-item>

      </p>

      <el-form-item label="审核人账号" prop="checkAdminAccount" style="clear:both">
        <el-input v-model="ruleForm.checkAdminAccount"></el-input>
      </el-form-item>

     <!-- <el-form-item label="店铺状态" prop="merchantStatusId">
        <el-input v-model="ruleForm.merchantStatusId"></el-input>
      </el-form-item>-->
      <el-form-item label="店铺注入时间" prop="enterTime">
        <el-input v-model="ruleForm.enterTime"></el-input>
      </el-form-item>
      <el-form-item label="店铺关键字" prop="merchantKeyword">
        <el-input v-model="ruleForm.merchantKeyword"></el-input>
      </el-form-item>
      <el-form-item label="营业执照" prop="licenseImg">
        <!--   <el-input v-model="ruleForm.licenseImg"></el-input>-->
        <p class="demo-image__preview" v-show="!compile">
          <el-image
            style="width: 200px; height: 150px"
            :src="ruleForm.licenseImg">
          </el-image>
          <!-- :preview-src-list="srcList">-->
        </p >
        <el-upload
          class="imgss"
          action="http://localhost:8301/merchantPhoto/upload"
          :show-file-list="false"
          :auto-upload=true
          :on-success="onSuccess2"
          name="file"
          :limit="1" v-show="compile">
          <img v-if="ruleForm.licenseImg" :src="ruleForm.licenseImg" style="width: 80px;heigh:80px;vertical-align: middle;">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <p v-show="!compile">
        <el-form-item label="身份证正面" prop="reverseCardImg" style="width: 40% ;float:left;margin-right: 3%" >
          <!-- <el-input v-model="ruleForm.reverseCardImg"></el-input>-->
          <el-image :src="ruleForm.reverseCardImg" style="width: 200px; height: 150px"></el-image>
        </el-form-item>

        <el-upload
          class="imgss"
          action="http://localhost:8301/merchantPhoto/upload"
          :show-file-list="false"
          :auto-upload=true
          :on-success="onSuccess3"
          name="file"
          :limit="1" v-show="compile">
          <img v-if="ruleForm.reverseCardImg" :src="ruleForm.reverseCardImg" style="width: 80px;heigh:80px;vertical-align: middle;">
          <i class="el-icon-plus"></i>
        </el-upload>

        <el-form-item label="身份证反面" prop="siteCardImg" style="width: 40%;float:left" v-show="!compile">
          <!-- <el-input v-model="ruleForm.siteCardImg"></el-input>-->
          <el-image :src="ruleForm.siteCardImg" style="width: 200px; height: 150px"></el-image>
        </el-form-item>

        <el-upload
          class="imgss"
          action="http://localhost:8301/merchantPhoto/upload"
          :show-file-list="false"
          :auto-upload=true
          :on-success="onSuccess4"
          name="file"
          :limit="1" v-show="compile">
          <img v-show="ruleForm.siteCardImg != null" :src="ruleForm.siteCardImg" style="width: 100%;heigh:100%;vertical-align: middle;">
          <i class="el-icon-plus" v-show="ruleForm.siteCardImg == null" ></i>
        </el-upload>
      </p>


    </el-form>
    <p style="clear: both;padding-top: 100px;padding-left: 70%;">
      <el-button
        size="mini"
        type="danger"
        @click="audit(ruleForm.merchantStatusId)" v-show="sta !=-1 || sta != -1 "  :disabled="forbid">提交</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="audit(3)" v-show="sta == 0 "  :disabled="forbid">通过</el-button>
      <el-button
        size="mini"
        type="danger"
        @click="audit(4)" v-show="sta == 0" :disabled="forbid" style="margin-left: 50px">驳回</el-button>

    </p>
  </div>
</template>

<script>

  export default {
    name: 'merchantInfo',
    props: ['ind','sta','compile'],
    data() {
      return {

        ruleForm: {

          /* shopkeeperName: "",//店主名称
           shopkeeperPhoneNumber: "",//店主手机号
           shopkeeperCardId: "",//店主身份证号
           bursePassword: "",//钱包密码
           burseBalance: "",//钱包余额
           cardCertificate: "",//身份证证件期效
           credCertificate: "",//身份证结束时间
           licenseCertifIcate: "", //营业执照期效
           licenseEndTime: "", //执照结束时间

           merchantLogoImg: "",//店铺头像
           merchantId: "",//店铺编号
           merchantName: "",//店铺名称
           merchantAccount: "",//店铺账号
           merchantPassword: "",//登录密码
           merchantNotice: "",//店铺公告
           merchantAddress: "",//店铺地址
           merchantDesc: "",//店铺描述
           merchantScore: "", //店铺评分
           merchantAttention: "",// 店铺关注数量
           merchantKindsId: "",//店铺主营类目编号
           merchantTypeId: "",//店铺类型编号
           checkAdminAccount: "",//审核人账号
           merchantSiteId: "",//店铺地址编号
           merchantStatusId:"",//店铺状态编号
           enterTime: "",//入驻时间

           merchantKeyword:"",//店铺关键字

           licenseImg: "",//店铺营业执照图片地址
          reverseCardImg: "",//店主身份证头像面图片地址
           siteCardImg: "",//身份证反面地址
 */
          /*createBy:"",//创建人
          createTime: "",//创建时间
          updateBy: "",//更新人
          updateTime: "",//更新时间*/

          /* name: '',
           region: '',
           date1: '',
           date2: '',
           delivery: false,
           type: [],
           resource: '',
           desc: ''*/
        },
        stat: 1,
        forbid: false,

        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        /* rules: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
           ],
           region: [
             { required: true, message: '请选择活动区域', trigger: 'change' }
           ],
           date1: [
             { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
           ],
           date2: [
             { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
           ],
           type: [
             { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
           ],
           resource: [
             { required: true, message: '请选择活动资源', trigger: 'change' }
           ],
           desc: [
             { required: true, message: '请填写活动形式', trigger: 'blur' }
           ]
         }*/
      };
    },
    created () {
      this.getData(this.ind)
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getData(obj){
        this.$axios.get("http://localhost:8301/merchantAccount/getSingelMerchant?merchantId="+obj)
          .then(response => {
            console.log(response.data)
            this.ruleForm=response.data;
          })

      },
      audit(val){
        this.forbid = true;
        this.$axios.put("http://localhost:8301/merchantAccount/updataMerchantInfo",{
          merchantId: this.ruleForm.merchantId,
          merchantStatusId: val
        }).then(response => {
          this.$emit("func",false)
        }).catch((r)=>{
          console.log(r);
        })
      },
      commit(){
        this.$axios.put("http://localhost:8301/merchantAccount/updataMerchantInfo",{
          merchant:this.ruleForm
        }).then(response => {
          this.$emit("func",false)
        }).catch((r)=>{
          console.log(r);
        })
      },
      onSuccess1 (res) {//店铺头像
        this.ruleForm.merchantLogoImg=res
        console.log(this.ruleForm.merchantLogoImg + '-----店铺头像' + res)

      },
      onSuccess2 (res) {//身份证证面
        this.ruleForm.reverseCardImg = res
        console.log(this.ruleForm.reverseCardImg + '-----身份证证面' + res)

      },
      onSuccess3 (res) {//身份证反面
        this.ruleForm.siteCardImg = res
        console.log(this.ruleForm.siteCardImg + '-----身份证反面' + res)

      },
      onSuccess4 (res) {//营业执照
        this.ruleForm.licenseImg = res
        console.log(this.ruleForm.licenseImg + '-----营业执照' + res)

      },


      /* resetForm(formName) {
         this.$refs[formName].resetFields();
       },*/
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      /* beforeAvatarUpload(file) {
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;

         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG 格式!');
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
       }*/

    },
    watch:{
      ind:function (da) {//监听属性变化
        this.getData(da)
      }
    },
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

